<template>
  <el-dialog
    title="角色分配"
    width="400px"
    :visible.sync="visible"
    :before-close="handleClose"
  >
    <el-form>
      <el-form-item label="当前用户" :label-width="formLabelWidth">
        <el-input :value="selectUserForm.username" readonly></el-input>
      </el-form-item>
      <el-form-item label="当前权限" :label-width="formLabelWidth">
        <el-input :value="selectUserForm.role_name" readonly></el-input>
      </el-form-item>
      <el-form-item label="新权限" :label-width="formLabelWidth">
        <el-select placeholder="请选择新权限 " :value="selectUserForm.role_name">
          <el-option value="主管"></el-option>
          <el-option value="HR"></el-option>
          <el-option value="开发人员"></el-option>
          <el-option value="经理"></el-option>
          <el-option value="销售人员"></el-option>
          <el-option value="人事经理"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleModifyRole">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    roleVisible: {
      type: Boolean,
      default: false,
    },
    selectUserForm:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      formLabelWidth:'80px'
    };
  },
  methods: {
    handleModifyRole() {
      this.$emit("handleModifyRole", false);
      // console.log(this.selectUserForm);
    },
    handleClose() {
      this.$emit("update:roleVisible", false);
    },
  },
  watch: {
    roleVisible() {
      this.visible = this.roleVisible;
    },
  },
};
</script>